<template>
	<view class="cl-dropdown__box" :class="[customClass]">
		<view class="cl-dropdown__target" @tap="open">
			<slot></slot>
		</view>

		<view
			class="cl-dropdown__wrapper"
			:class="[
				{
					'is-show': visible
				}
			]"
		>
			<view class="cl-dropdown__modal" @tap="close"></view>
			<view
				class="cl-dropdown"
				:style="{
					left: offset.left + 'px',
					top: offset.top + 'px'
				}"
			>
				<slot name="dropdown"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		customClass: {
			type: String,
			default: 'default'
		}
	},

	data() {
		return {
			offset: {
				left: 0,
				top: 0
			},
			visible: false
		};
	},

	mounted() {
		const query = uni.createSelectorQuery().in(this);

		query
			.select(`.cl-dropdown__target`)
			.boundingClientRect(res => {
				this.offset = {
					left: res.left + res.width / 2 - 16,
					top: res.top + res.height + 12
				};
			})
			.exec();
	},

	methods: {
		open() {
			this.visible = true;
		},

		close() {
			this.visible = false;
		}
	}
};
</script>
